<template>
	
	<view class="wrap">
		
		<view v-for="(item,index) in items" :key="item.id" @click="tabType(index)" class="list-item" :class="{'active':nowsel.index==index}">
			<view class="left">
				<view class="icon-wrap">
					<image v-if="nowsel.index==index&&index==0" src="/static/chujia.png" mode=""></image>
					<image v-if="nowsel.index!=index&&index==0" src="/static/chuji.png"></image>
					<image v-if="nowsel.index==index&&index==1" src="/static/zhongjia.png" mode=""></image>
					<image v-if="nowsel.index!=index&&index==1" src="/static/zhongji.png"></image>
					<image v-if="nowsel.index==index&&index==2" src="/static/gaojia.png" mode=""></image>
					<image v-if="nowsel.index!=index&&index==2" src="/static/gaoji.png"></image>
				</view>
				<view class="desc">
					<view style="margin-bottom:10rpx">{{item.name}}</view>
					<view>{{item.remark}}</view>
				</view>
			</view>
			<view class="right">
				￥ {{item.price}}
			</view>
		</view>
		<!-- <view @click="tabType(2)" class="list-item" :class="{'active':nowsel.index==2}">
			<view class="left">
				<view class="icon-wrap">
					<image v-if="nowsel.index==2" src="/static/zhongjia.png" mode=""></image>
					<image v-else src="/static/zhongji.png"></image>
				</view>
				<view class="desc">
					<view style="margin-bottom:10rpx">中级代理</view>
					<view>下单可享受7折优惠</view>
				</view>
			</view>
			<view class="right">
				￥ 20000
			</view>
		</view>
		<view @click="tabType(3)" class="list-item" :class="{'active':nowsel.index==3}">
			<view class="left">
				<view class="icon-wrap">
					<image v-if="nowsel.index==3" src="/static/gaojia.png" mode=""></image>
					<image v-else src="/static/gaoji.png"></image>
				</view>
				<view class="desc">
					<view style="margin-bottom:10rpx">高级代理</view>
					<view>下单可享受6.5折优惠</view>
				</view>
			</view>
			<view class="right">
				￥ 50000
			</view>
		</view> -->
		
		<view class="sub-btn" @click="subData">
			立即支付
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				items:[{
					
				}],
				nowsel:{
					index:'no'
				}
			}
		},
		onShow() {
			
		},
		onLoad(){
			this.getData()
		},
		methods:{
			subData(){
				let that=this
				if(this.nowsel.index==='no'){
					uni.showToast({
					    title: '未选择代理类型',
					    dduration:4000,
						icon:'none'
					});
					return
				}
				let ids=that.items[that.nowsel.index].id
				uni.navigateTo({
					url: `/pages/createorder/index?id=${ids}&number=1`
				})
				// uni.showModal({
				//     title: '确认提交？',
				//     content: '',
				//     success: function (res) {
				//         if (res.confirm) {
				//             that.apipost('/api/user/submit_agent',{
				// 				id:that.items[that.nowsel.index]
				//             },true).then(res => {
				//             	if(res.Code==10200){
				// 					uni.showToast({
				// 						title: res.Message,
				// 						duration:4000,
				// 						icon: 'none'
				// 					});
				// 					//uni.navigateBack()
				//             		// let data=res.Data?res.Data:{}
				//             		// that.dataObj=res.Data?res.Data:{}
				//             		// that.src=that.dataObj.charge_address
				//             	}
				            	
				//             }).catch(err=>{
				//             	console.log(err)
				//             });
				//         } else if (res.cancel) {
				            
				//         }
				//     }
				// });
			},
			getData(){
				let that=this
				that.apipost('/api/user/agent').then(res => {
					if(res.Code==10200){
						that.items=res.Data
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			tabType(type){
				this.nowsel.index=type
			}
		}
	}
</script>

<style>
	.sub-btn{
		width:684rpx;
		border-radius:10rpx;
		margin:0 auto;
		margin-top:150rpx;
		color:#fff;
		background:#f9436b;
		height:100rpx;
		display:flex;
		align-items:center;
		justify-content:center;
	}
	.wrap{
		padding-top:60rpx;
	}
	.icon-wrap{
		
		width:88rpx;
		height:88rpx;
		margin-right:40rpx;
	}
	.list-item .left{
		display:flex;
	}
	.list-item .right{
		
		display:flex;
		align-items: center;
	}
	.list-item{
		padding:36rpx 40rpx 28rpx 46rpx;
		/* border:1rpx solid #b4b4b4; */
		box-sizing: border-box;
		border-radius: 10rpx;
		width:684rpx;
		margin:0 auto;
		justify-content: space-between;
		color:#000;
		display:flex;
		align-items: center;
		background: url(/static/changtiao.png) no-repeat center;
		background-size:100% 100%;
		margin-bottom:58rpx;
	}
	.active{
		background: url(/static/changtiaoa.png) no-repeat center!important;
		background-size:100% 100%!important;
	}
	page{
		background:#f1f1f1;
	}
</style>